<template>
  <div>
    <div class="default_menu_item" :class="{'is_active_item': checkKey === 'defaultKey'}" @click="$emit('itemCheck', {key: 'defaultKey', id: 'default'})">常用</div>
    <Menu
      :menus="reMenus"
      :checkKey="checkKey"
      v-bind="$attrs"
    />
  </div>
</template>
<script lang="ts">
// import { defineComponent } from 'vue'
import Menu from './Menu.vue'
export default {
  name: 'Collap',
}
</script>
<script setup lang="ts">
import useThemeConfig from '@/hooks/useThemeConfig';
import { computed, toRefs, PropType } from 'vue'
import { Menus, Menuss } from './typing'

const props = defineProps({
  menus:{
    type: Array as PropType<Array<Menuss>>,
    required: true
  },
   checkKey: String
})

const { menus, checkKey } = toRefs(props)

const reMenus = computed(()=>{
  if(!menus.value || !menus.value.length) return []
  const newAr = menus.value // reList(menus.value, '')
  return newAr
})

// 深拷贝加动态添加key
// function reList(par:Array<Menus>, parentKey: string): Array<Menuss> {
//   if(!par.length) return []
//   const newAr: Array<Menuss> = []
//   par.forEach((val,index)=>{
//     const obj = {
//       ...val,
//       key: parentKey ? `${parentKey}-${index}` : index+''
//     }
//     newAr.push(obj)
//     if(val.children && val.children.length){
//       obj.children = reList(val.children, obj.key)
//     }
//   })
//   return newAr
// }

const {
  theme
}= useThemeConfig()
</script>
<style lang="less" scoped>
.default_menu_item{
  padding: 12px 16px;
  cursor: pointer;
  &:hover{
    color: v-bind("theme.fontCheckColor");
  }
}
.default_menu_item.is_active_item{
  color: v-bind("theme.fontCheckColor") !important;
  background: v-bind("theme.blurColor");
  padding-left: 14px;
}

</style>
